<template>
  <div style="margin-bottom: 30px;">
    <el-text class="mx-1"> 用户名：</el-text>
    <el-input v-model="search" size="small" clearable style="width: 200px" placeholder="输入书名" />
    <el-text class="mx-1"> 权限：</el-text>
    <el-input v-model="search" size="small" clearable style="width: 200px" placeholder="输入书名" />
    <el-button type="primary" icon="Search" style="margin-left: 30px;">搜索</el-button>
  </div>
  <el-button type="danger" icon="Delete" :disabled="login.data.authority == 'common'" circle @click="handleDeleteBatch" />



  <el-table :data="userList" @selection-change="handleSelectionChange" border style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column label="ID" prop="uid" align="center" />
    <el-table-column label="姓名" prop="username" align="center" />
    <!-- <el-table-column label="受权权限" align="center">
      <template #default="scope">

        <el-switch v-model="scope.row.authority.authority"
         class="ml-2" 
          active-text="用户"
          inactive-text="管理员"
          active-value='common'
          inactive-value='admin' />
      </template>
    </el-table-column> -->

    <el-table-column label="受权权限" align="center">

      <template #default="scope">
        <el-switch v-model="scope.row.disabled" class="ml-2" :active-value=1 :inactive-value=0 />

      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <!-- 使用template中的作用域插槽，
      它的作用是在外部获取组件内的数据 ,
      这里是为了获取这一行的数据，
      我们让slot-scope值为scope，那么由scope.row就可以得到数据了 -->
      <template #default="scope">
        <el-button type="primary" :disabled="login.data.aid == 2" icon="Edit" @click="handleEdit(scope.row.uid)" circle
          color:red />
        <el-button type="danger" icon="Delete" :disabled="login.data.aid == 2" circle
          @click="handleDelete(scope.row.uid)" />
      </template>
    </el-table-column>
  </el-table>
  <mypage :total="total" @current="getUserList" @pageSize="getUserList" ref="userpage"></mypage>
</template>

<script setup>

import mypage from '../components/page.vue'
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";

import { ref, reactive, getCurrentInstance, onMounted, onBeforeMount } from 'vue'//按需导入


// const value2 = ref(true)
const search = ref();//定义简单数据类型
const userList = ref([{}]);//定义复杂数据类型
const total = ref(0);
const login = reactive({})
let multipleSelection = []
const handleEdit = (id) => {
  console.log(id);
}
const userpage = ref(null)

let where = {

}
const handleSelectionChange = (val) => {
  multipleSelection = val.map(item => item.uid)
  console.log(multipleSelection)
}
const handleDelete = (id) => {
  console.log(id);
}

const handleDeleteBatch = () => {
  ElMessageBox.confirm("你确定删除?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "警告",
  }).then(() => {
    axios.post('/user/deleteUserByIds', multipleSelection).then(res => {
      if (res.data.code == 200) {
        // this.getBooklist();
        ElMessage({
          type: "success",
          message: res.data.msg,
        });
        getUserList(where);
      }
    })
  })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })

}
onBeforeMount(() => {

  login.data = JSON.parse(sessionStorage.getItem("user"));
})
onMounted(() => {

  getUserList(
    where
  )
})


const getUserList = (where) => {
  where = {
    pageindex: userpage.value.currentPage,
    pagesize: userpage.value.pageSize
  }

  axios.post('/user/getAllUsers', where).then(res => {
    if (res.data.code == 200) {
      console.log(res.data.result)
      userList.value = res.data.result.list
      total.value = res.data.result.total
    } else {

    }
  })
}

</script>
